<script setup>
    import { RouterLink,useRouter } from 'vue-router';
    import axios from 'axios';
    import { ref } from 'vue';
    import { showMsg } from '@/components/Util';

    let router = useRouter();
    let uname = ref('');
    let pwd = ref('');
    let mobile = ref("");
    function sub(){
        if(uname.value && pwd.value && mobile.value){
            axios.post('/api/reg',{uname:uname.value,pwd:pwd.value,mobile:mobile.value},{
                headers:{
                    "Content-Type":"application/json"
                }
            }).then(res=>{
                if(res.data.status==200){
                    router.push('/')
                }else{
                    showMsg(res.data.msg,'error',2000)
                }
                console.log(res);
            })
        }else{
            showMsg("表单填写不完整",'error',2000)
        }
    }
</script>

<template>
     <div class="reg">
        <div class="title">注册</div>
         <input type="text" placeholder="用户名" v-model="uname">
         <input type="password" placeholder="密码" v-model="pwd">
         <input type="text" placeholder="手机号" v-model="mobile">
         <input type="button" placeholder="注册" @click="sub" class="zc">
         <span>已有账号<RouterLink to="/">登录</RouterLink></span>
     </div>
</template>

<style scoped>
        .reg{
            width: 375px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .reg>input{
            height: 40px;
            outline: none;
            padding: 5px;
        }
</style>